<template>
  <div>
    <el-form
      ref="addRuleFormRef"
      :inline="true"
      :model="addRuleForm"
      :rules="addRules"
      class="demo-form-inline"
      label-position="right"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="部署路径" prop="deployment_path">
            <el-input
              v-model="addRuleForm.deployment_path"
              placeholder="请输入部署路径"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口号" prop="port" name="port">
            <el-input
              v-model="addRuleForm.port"
              placeholder="请输入端口号"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="默认图片"
            prop="default_picture"
            name="default_picture"
            required
          >
            <el-input v-model="addRuleForm.default_picture" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="附件地址" prop="address" name="address" required>
            <el-input v-model="addRuleForm.address" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="是否静态化路径"
            prop="is_static_path"
            name="is_static_path"
            required
          >
            <el-radio-group v-model="addRuleForm.is_static_path">
              <el-radio value="1" size="large">是</el-radio>
              <el-radio value="2" size="large">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="新产品时间设定"
            prop="product_time"
            name="product_time"
            required
          >
            <el-input
              v-model="addRuleForm.product_time"
              placeholder="以'天'为单位"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="上传附件最大值"
            prop="attachments_max"
            name="attachments_max"
            required
          >
            <el-input
              v-model="addRuleForm.attachments_max"
              placeholder="以MB为单位"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="上传图片最大值"
            prop="picture_max"
            name="picture_max"
            required
          >
            <el-input
              v-model="addRuleForm.picture_max"
              placeholder="以MB为单位"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="前台上传最大值"
            prop="foreground_max"
            name="foreground_max"
            required
          >
            <el-input
              v-model="addRuleForm.foreground_max"
              placeholder="以MB为单位"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="短信平台WSDL" prop="wsdl" name="wsdl" required>
            <el-input
              v-model="addRuleForm.wsdl"
              placeholder="请输入短信平台WSDL"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="短信接口用户名"
            prop="message_user"
            name="message_user"
            required
          >
            <el-input
              v-model="addRuleForm.message_user"
              placeholder="请输入短信接口用户名"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="短信接口密码"
            prop="message_password"
            name="message_password"
            required
          >
            <el-input
              v-model="addRuleForm.message_password"
              placeholder="请输入短信接口密码"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="审核未通过模版"
            prop="not_template"
            name="not_template"
            required
          >
            <el-input
              v-model="addRuleForm.not_template"
              placeholder="请输入审核未通过模版"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="审核通过模版"
            prop="template"
            name="template"
            required
          >
            <el-input
              v-model="addRuleForm.template"
              placeholder="请输入审核通过模版"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="注册成功模版"
            prop="success_template"
            name="success_template"
            required
          >
            <el-input
              v-model="addRuleForm.success_template"
              placeholder="请输入注册成功模版"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="验证码模版"
            prop="code_template"
            name="code_template"
            required
          >
            <el-input
              v-model="addRuleForm.code_template"
              placeholder="请输入验证码模版"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="管理员手机号"
            prop="admin_number"
            name="admin_number"
            required
          >
            <el-input
              v-model="addRuleForm.admin_number"
              placeholder="请输入管理员手机号"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="连接短信平台开关"
            prop="platform_switch"
            name="platform_switch"
            required
          >
            <el-input
              v-model="addRuleForm.platform_switch"
              placeholder="请输入连接短信平台开关"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="呼叫中心WSDL"
            prop="call_center"
            name="call_center"
            required
          >
            <el-input
              v-model="addRuleForm.call_center"
              placeholder="请输入呼叫中心WSDL"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="知识库WSDL"
            prop="knowledge_wsdl"
            name="knowledge_wsdl"
            required
          >
            <el-input
              v-model="addRuleForm.knowledge_wsdl"
              placeholder="请输入知识库WSDL"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="接口所属环境"
            prop="interface"
            name="interface"
            required
          >
            <el-select
              v-model="addRuleForm.interface"
              clearable
              placeholder="请选择接口所属环境"
              style="width: 240px"
            >
              <el-option
                v-for="item in interfaceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="静态化路径范围"
            prop="path_range"
            name="path_range"
            required
          >
            <el-input
              v-model="addRuleForm.path_range"
              placeholder="请输入静态化路径范围"
              clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="附件保存位置"
            prop="save_location"
            name="save_location"
            required
          >
            <el-radio-group v-model="addRuleForm.save_location">
              <el-radio value="sql" size="large">数据库</el-radio>
              <el-radio value="ftp" size="large">FTP</el-radio>
              <el-radio value="sftp" size="large">SFTP</el-radio>
              <el-radio value="nas" size="large">nas</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="addRuleForm.save_location == 'ftp'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="FTP地址" prop="ftp" name="ftp" required>
              <el-input
                v-model="addRuleForm.ftp"
                placeholder="请输入FTP地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="FTP用户名"
              prop="ftp_username"
              name="ftp_username"
              required
            >
              <el-input
                v-model="addRuleForm.ftp_username"
                placeholder="请输入FTP用户名"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="FTP密码"
              prop="ftp_password"
              name="ftp_password"
              required
            >
              <el-input
                v-model="addRuleForm.ftp_password"
                placeholder="请输入FTP密码"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="FTP编码"
              prop="ftp_encoding"
              name="ftp_encoding"
              required
            >
              <el-input
                v-model="addRuleForm.ftp_encoding"
                placeholder="请输入FTP编码"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="addRuleForm.save_location == 'sftp'">
        <el-row>
          <el-col :span="12">
            <el-form-item label="SFTP地址" prop="sftp" name="sftp" required>
              <el-input
                v-model="addRuleForm.sftp"
                placeholder="请输入SFTP地址"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="SFTP用户名"
              prop="sftp_username"
              name="sftp_username"
              required
            >
              <el-input
                v-model="addRuleForm.sftp_username"
                placeholder="请输入SFTP用户名"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="SFTP密码"
              prop="sftp_password"
              name="sftp_password"
              required
            >
              <el-input
                v-model="addRuleForm.sftp_password"
                placeholder="请输入SFTP密码"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="SFTP端口"
              prop="sftp_port"
              name="sftp_port"
              required
            >
              <el-input
                v-model="addRuleForm.sftp_port"
                placeholder="请输入SFTP端口"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="SFTP存储路径"
              prop="sftp_path"
              name="sftp_path"
              required
            >
              <el-input
                v-model="addRuleForm.sftp_path"
                placeholder="请输入SFTP存储路径"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div v-if="addRuleForm.save_location == 'nas'">
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="nas存储路径"
              prop="nas_path"
              name="nas_path"
              required
            >
              <el-input
                v-model="addRuleForm.nas_path"
                placeholder="请输入nas存储路径"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row class="button_row">
        <el-col :span="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm(addRuleFormRef)">
              确定
            </el-button>
            <el-button @click="onReset(addRuleFormRef)">取消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { getSystemList } from '@/api/config/public.js'

const addRuleFormRef = ref()
const addRuleForm = ref({
  deployment_path: '',
  port: '',
  default_picture: '',
  address: '',
  is_static_path: 1,
  product_time: '',
  attachments_max: '',
  picture_max: '',
  foreground_max: '',
  wsdl: '',
  message_user: '',
  message_password: '',
  not_template: '',
  template: '',
  success_template: '',
  code_template: '',
  admin_number: '',
  platform_switch: '',
  call_center: '',
  knowledge_wsdl: '',
  interface: '',
  path_range: '',
  save_location: '',
  ftp: '',
  ftp_username: '',
  ftp_password: '',
  ftp_encoding: '',
  sftp: '',
  sftp_username: '',
  sftp_password: '',
  sftp_port: '',
  sftp_path: '',
  nas_path: ''
})

const getList = () => {
  getSystemList().then((res) => {
    addRuleForm.value = {
      deployment_path: res.data.cmsConfig.contextPath,
      port: res.data.cmsConfig.port,
      default_picture: res.data.cmsConfig.defImg,
      address: res.data.cmsConfig.dbFileUri,
      is_static_path: 1,
      product_time: '',
      attachments_max: '',
      picture_max: '',
      foreground_max: '',
      wsdl: '',
      message_user: '',
      message_password: '',
      not_template: '',
      template: '',
      success_template: '',
      code_template: '',
      admin_number: '',
      platform_switch: '',
      call_center: '',
      knowledge_wsdl: '',
      interface: '',
      path_range: '',
      save_location: '',
      ftp: '',
      ftp_username: '',
      ftp_password: '',
      ftp_encoding: '',
      sftp: '',
      sftp_username: '',
      sftp_password: '',
      sftp_port: '',
      sftp_path: '',
      nas_path: ''
    }
  })
}
// 接口所属环境
const interfaceOptions = ref([
  {
    value: 'formal',
    label: '正式'
  },
  {
    value: 'test',
    label: '测试'
  },
  {
    value: 'unknown',
    label: '未知'
  }
])
// 校验规则
const addRules = reactive({
  default_picture: [
    { required: true, message: '请输入默认图片', trigger: 'blur' }
  ],
  address: [{ required: true, message: '请输入默认地址', trigger: 'blur' }],
  is_static_path: [
    {
      required: true,
      message: '请选择是否静态化路径',
      trigger: 'blur'
    }
  ],
  product_time: [
    {
      required: true,
      message: '请输入新产品时间设定',
      trigger: 'blur'
    }
  ],
  attachments_max: [
    { required: true, message: '请输入上传附件最大值', trigger: 'blur' }
  ],
  picture_max: [
    { required: true, message: '请输入上传图片最大值', trigger: 'blur' }
  ],
  foreground_max: [
    { required: true, message: '请输入前台上传最大值', trigger: 'blur' }
  ],
  wsdl: [{ required: true, message: '请输入短信平台WSDL', trigger: 'blur' }],
  message_user: [
    { required: true, message: '请输入短信接口用户名', trigger: 'blur' }
  ],
  message_password: [
    { required: true, message: '请输入短信接口密码', trigger: 'blur' }
  ],
  not_template: [
    { required: true, message: '请输入审核未通过模版', trigger: 'blur' }
  ],
  template: [
    { required: true, message: '请输入审核通过模版', trigger: 'blur' }
  ],
  success_template: [
    { required: true, message: '请输入注册成功模版', trigger: 'blur' }
  ],
  code_template: [
    { required: true, message: '请输入验证码模版', trigger: 'blur' }
  ],
  admin_number: [
    { required: true, message: '请输入管理员手机号', trigger: 'blur' }
  ],
  platform_switch: [
    { required: true, message: '请输入连接短信平台开关', trigger: 'blur' }
  ],
  call_center: [
    { required: true, message: '请输入呼叫中心WSDL', trigger: 'blur' }
  ],
  knowledge_wsdl: [
    { required: true, message: '请输入知识库WSDL', trigger: 'blur' }
  ],
  interface: [
    { required: true, message: '请选择接口所属环境', trigger: 'blur' }
  ],
  path_range: [
    { required: true, message: '请输入静态化附件范围', trigger: 'blur' }
  ],
  save_location: [
    { required: true, message: '请选择附件保存位置', trigger: 'blur' }
  ],
  ftp: [{ required: true, message: '请输入FTP地址', trigger: 'blur' }],
  ftp_username: [
    { required: true, message: '请输入FTP用户名', trigger: 'blur' }
  ],
  ftp_password: [{ required: true, message: '请输入FTP密码', trigger: 'blur' }],
  ftp_encoding: [{ required: true, message: '请输入FTP密码', trigger: 'blur' }],
  sftp: [{ required: true, message: '请输入SFTP地址', trigger: 'blur' }],
  sftp_username: [
    { required: true, message: '请输入SFTP用户名', trigger: 'blur' }
  ],
  sftp_password: [
    { required: true, message: '请输入SFTP密码', trigger: 'blur' }
  ],
  sftp_port: [{ required: true, message: '请输入SFTP端口', trigger: 'blur' }],
  sftp_path: [
    { required: true, message: '请输入SFTP存储路径', trigger: 'blur' }
  ],
  nas_path: [{ required: true, message: '请输入nas存储路径', trigger: 'blur' }]
})
// const queryParams = ref({
//         pageNum: 1,
//         pageSize: 10
// })

// // 提交
const submitForm = async (formEl) => {
  console.log(formEl)
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(addRuleForm)
    } else {
      console.log('error submit!', fields)
    }
  })
}
// // 重置
const onReset = (formEl) => {
  addRuleForm.value = {
    deployment_path: '',
    port: '',
    default_picture: '',
    address: '',
    is_static_path: 1,
    product_time: '',
    attachments_max: '',
    picture_max: '',
    foreground_max: '',
    wsdl: '',
    message_user: '',
    message_password: '',
    not_template: '',
    template: '',
    success_template: '',
    code_template: '',
    admin_number: '',
    platform_switch: '',
    call_center: '',
    knowledge_wsdl: '',
    interface: '',
    path_range: '',
    save_location: '',
    ftp: '',
    ftp_username: '',
    ftp_password: '',
    ftp_encoding: '',
    sftp: '',
    sftp_username: '',
    sftp_password: '',
    sftp_port: '',
    sftp_path: '',
    nas_path: ''
  }
  formEl.resetFields()
}
// const handleSelectionChange = (selection) => {
//     ids.value = selection.map(item => item.date)
//     multiple.value = !selection.length
// }
getList()
</script>

<style lang="scss" scoped>
.button_row {
  text-align: center;
  margin-top: 30px;
}
</style>
